<div id="header" class="on">
  <div class="header">
    <a class="head_logo" href="index.aspx">
      <img src="static/images/common/logo.png" alt="ctmon" />
    </a>
    <div class="head_nav_btn"><span></span></div>
    <div class="mySelect positioning">
      <div class="drapList">
        <ul></ul>
      </div>
    </div>
  </div>
  <div class="main-menu">
    <div class="background">
      <div class="back"></div>
      <div class="circle black"></div>
      <div class="circle circle2"></div>
    </div>
    <div class="h5-menu">
      <ul class="nav_list">
        <li class="">
          <a href="index.html">Home</a>
        </li>
        <li class="active">
          <p>about</p>
          <div class="drapList">
            <a href="about.html">product</a>
            <a href="about.html">product</a>
            <a href="about.html">product</a>
            <a href="about.html">product</a>
          </div>
        </li>
        <li class="">
          <p>contact</p>
          <div class="drapList">
            <a href="about.html">product</a>
            <a href="about.html">product</a>
            <a href="about.html">product</a>
            <a href="about.html">product</a>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <script>
    $(document).ready(function () {
      var menu = $('#header .head_nav_btn');
      menu.click(function (e) {
        // e.stopPropagation();
        var state = $(this).attr('class');
        if (state.indexOf('open') >= 0) {
          $(this).removeClass('open');
          $('body').removeClass('no-scroll');
          $('.main-menu').animate(
            {
              opacity: '0'
            },
            500
          );
          $('.main-menu').removeClass('locked');
          $('.circle2').removeClass('white');
          $('.nav_list > li').each(function (i) {
            $(this).removeClass('wow fadeInUp animated');
          });
        } else {
          $(this).addClass('open');
          $('body').addClass('no-scroll');
          $('.main-menu').animate(
            {
              opacity: '1'
            },
            500
          );
          $('.main-menu').addClass('locked');
          $('.circle2').addClass('white');
          // $('.nav_list > li').each(function (i) {
          //   $(this)
          //     .addClass('wow fadeInUp animated')
          //     .css({
          //       'animation-delay': i * 2 + '00ms'
          //     });
          // });
        }
      });
      $('.menu-nav var').click(function () {
        menu.removeClass('open');
        $('body').removeClass('no-scroll');
        $('.main-menu').removeClass('locked');
      });
      // 点击弹出子导航
      $('.nav_list>li>p').click(function () {
        var ul_nei_nav = $(this).siblings('.ul_nei_nav');
        if (ul_nei_nav.css('display') === 'none') {
          $(this).siblings('.ul_nei_nav').slideDown();
          $(this).parents('li').siblings().find('.ul_nei_nav').slideUp();
          $(this).addClass('on');
          $(this).parents('li').siblings().find('p').removeClass('on');
        } else {
          $(this).siblings('.ul_nei_nav').slideUp();
          $(this).removeClass('on');
        }
      });
      showNav();
      // 导航栏定位
      function showNav() {
        var urlstr = location.href;
        var urlstatus = false;
        $('.nav_list li a').each(function () {
          if ((urlstr + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href') != '') {
            $(this).parent().addClass('curr').siblings('li').removeClass('curr');
            $(this).addClass('on');
            $(this).parents('.ul_nei_nav').show();
            $(this).parents('li').children('p').addClass('on');
            $(this).parents('.ul_nei_nav').siblings('li').addClass('on');
            urlstatus = true;
          } else {
            $(this).parent().removeClass('curr');
            urlstatus = false;
          }
        });
      }
      //自定义下拉
      if ($('.mySelect').length) {
        $('.mySelect').each(function () {
          var s = $(this);
          var z = parseInt(s.css('z-index'));
          var dt = $(this).children('.show');
          var dd = $(this).children('.drapList');
          var _show = function () {
            dd.slideDown(300);
            s.css('z-index', z + 1);
            dt.addClass('on');
          }; //展开效果
          var _hide = function () {
            dd.slideUp(300);
            s.css('z-index', z);
            dt.removeClass('on');
          }; //关闭效果
          dt.click(function () {
            dd.is(':hidden') ? _show() : _hide();
          });
          dd.on('click', 'li', function () {
            dt.children('em').html($(this).text());
            var _id = $(this).data('id');
            var _par = $(this).parents('.mySelect');
            _par.find('.show').attr('data-id', _id);
            _hide();
          });
          $('body').click(function (i) {
            !$(i.target).parents('.mySelect').first().is(s) ? _hide() : '';
          });
        });
      }
    });

    $('.nav_list > li').click(function () {
      $(this).toggleClass('active').siblings().removeClass('active');
    });
  </script>
</div>
<!-- light 为透明 -->
<div id="header_pc" class="header-pc">
  <div class="header-pc-box w1600">
    <div class="header-pc-left">
      <a href="index.html" class="logo">
        <img src="static/images/common/logo.png" alt="ctmon" />
      </a>
    </div>

    <div class="header-pc-right">
      <div class="header-pc-center">
        <ul class="nav">
          <li class="on">
            <a href="index.html" class="nav-a">Home</a>
            <div class="pc_ul_nei_nav"></div>
          </li>
          <li>
            <a href="product.html" class="nav-a">Products</a>
            <div class="pc_ul_nei_nav">
              <a class="pc_ul_nei_nav_a" href="product.html">Long Screws</a>
              <a class="pc_ul_nei_nav_a" href="titanium.html">Titnium Screws</a>
            </div>
          </li>
          <li>
            <a href="JavaScript:viod(0);" class="nav-a">Industries</a>
            <div class="pc_ul_nei_nav">
              <a class="pc_ul_nei_nav_a" href="custom.html">Aerospace</a>
              <a class="pc_ul_nei_nav_a" href="complete.html">Automotive Medical</a>
              <a class="pc_ul_nei_nav_a" href="surface.html">Medical Devices </a>
              <a class="pc_ul_nei_nav_a" href="screw.html">Robotics and Automation</a>
            </div>
          </li>

          <li>
            <a href="#" class="nav-a">Resources</a>
            <div class="pc_ul_nei_nav">
              <a class="pc_ul_nei_nav_a" href="faq.html">FAQs</a>
              <a class="pc_ul_nei_nav_a" href="odm.html">ODM</a>
            </div>
          </li>
          <li>
            <a href="contact.html" class="nav-a">Contact Us</a>
          </li>
          <li>
            <a href="blog.html" class="nav-a">Blogs</a>
          </li>
          <li>
            <a href="about.html" class="nav-a">About Us</a>
          </li>
        </ul>
      </div>
      <div class="header-pc-right-phone">
        <div class="popbtn header-pc-right-phone-btn">Contact Us</div>
      </div>
    </div>
  </div>
  <!-- <div class="product-list-bread">
    <ul class="product-list-bread-ul">
      <li><a href=""><img src="../static/images/product-list/product-list-img-bread.png" alt=""></a></li>
      <li><a href=""></a>Home</li>
      <li><a href=""></a>/</li>
      <li><a href=""></a>Products</li>
      <li><a href=""></a>/</li>
      <li><a href="">Product details</a></li>
    </ul>
  </div> -->
</div>
